<template>
    <div>
        <el-dialog
            title="非税单"
            :visible.sync="dialogVisible"
            width="1200px"
            class="dialog"
             :close-on-click-modal="false"
        >
            <div id="printBillTemplate" class="card-box">
                <div >
                    <el-row>
                        <el-col :span="8" style="text-align: center;"><span style="border: 1px solid black;padding: 5px 15px;">市级</span></el-col>
                        <el-col :span="16"><span style="font-size: 24px;">广东省非税输入（电子）票据</span><span style="margin-left: 10px">CH68638093</span></el-col>
                    </el-row>
                </div>
                <div style="padding-top: 50px">
                    <el-row>
                        <el-col :span="8">缴费通知书编码：2020080800029120</el-col>
                        <el-col :span="16">缴款单位（人）：深圳中科保泰科技有限公司</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">执收单位编码：907001</el-col>
                        <el-col :span="16">执收单位名称：深圳市福田区财政局本级</el-col>
                    </el-row>
                </div>
                <div style="padding-top: 50px">
                    <el-table :data="tableData" >
                        <el-table-column label="项目编码" prop="propertyCode">
                        </el-table-column>
                        <el-table-column label="项目名称" prop="projectName">
                        </el-table-column>
                        <el-table-column label="单位" prop="customerName" width="250"></el-table-column>
                        <el-table-column label="数量" prop="num"></el-table-column>
                        <el-table-column label="标准" prop="collectionAmount">
                        </el-table-column>
                        <el-table-column label="金额" prop="collectionAmount">
                        </el-table-column>
                    </el-table>
                </div>
                <div style="padding-top: 80px">
                    <el-row>
                        <el-col :span="8">滞纳金合计：0.00</el-col>
                        <el-col :span="8"></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">金额合计：<span>{{form.collectionAmount}}</span>元</el-col>
                        <el-col :span="16">(大写：<span>{{form.collectionAmount|toChies}}）</span></el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">通知书备注：{{form.collectionRemarks  }}</el-col>
                    </el-row>
                    <el-row style="padding-top: 40px">
                        <el-col :span="8">流水号：{{form.bankStatement }}</el-col>
                        <el-col :span="16">收款日期：{{form.collectionDate  }}</el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">代收银行：{{form.bankName  }}</el-col>
                        <el-col :span="16">收款人：{{form.collectionName  }}</el-col>
                    </el-row>
                </div>
            </div>
            <div style="text-align: right;padding-top: 20px" class="card-box">
                <el-button type="primary" size="small" @click="print">打印</el-button>
                <el-button type="primary" size="small" @click="close">关闭</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>
    import printJS from 'print-js'
    import {getRentContractId} from '../../../api/finance-collection-actual'

    export default {
        name: "bill-data",

        filters:{
            toChies: function(amount) { //形参
                // 汉字的数字
                const cnNums = ["零", "壹", "贰", "叁", "肆", "伍", "陆", "柒", "捌", "玖"];
                // 基本单位
                const cnIntRadice = ["", "拾", "佰", "仟"];
                // 对应整数部分扩展单位
                const cnIntUnits = ["", "万", "亿", "兆"];
                // 对应小数部分单位
                const cnDecUnits = ["角", "分"];
                // 整数金额时后面跟的字符
                const cnInteger = "整";
                // 整型完以后的单位
                const cnIntLast = "元";
                // 最大处理的数字
                const maxNum = 9999999999999999.99;
                // 金额整数部分
                let integerNum;
                // 金额小数部分
                let decimalNum;
                // 输出的中文金额字符串
                let chineseStr = "";
                // 分离金额后用的数组，预定义
                let parts;
                if (amount === "") {
                    return "";
                }
                amount = parseFloat(amount);
                if (amount >= maxNum) {
                    // 超出最大处理数字
                    return "";
                }
                if (amount === 0) {
                    chineseStr = cnNums[0] + cnIntLast + cnInteger;
                    return chineseStr;
                }
                // 转换为字符串
                amount = amount.toString();
                if (amount.indexOf(".") === -1) {
                    integerNum = amount;

                    decimalNum = "";
                } else {
                    parts = amount.split(".");
                    integerNum = parts[0];
                    decimalNum = parts[1].substr(0, 4);
                }
                // 获取整型部分转换
                if (parseInt(integerNum, 10) > 0) {
                    let zeroCount = 0;
                    const IntLen = integerNum.length;
                    for (let i = 0; i < IntLen; i++) {
                        const n = integerNum.substr(i, 1);
                        const p = IntLen - i - 1;
                        const q = p / 4;
                        const m = p % 4;
                        if (n === "0") {
                            zeroCount++;
                        } else {
                            if (zeroCount > 0) {
                                chineseStr += cnNums[0];
                            }
                            // 归零
                            zeroCount = 0;
                            //alert(cnNums[parseInt(n)])
                            chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
                        }
                        if (m === 0 && zeroCount < 4) {
                            chineseStr += cnIntUnits[q];
                        }
                    }
                    chineseStr += cnIntLast;
                }
                // 小数部分
                if (decimalNum !== "") {
                    const decLen = decimalNum.length;
                    for (let i = 0; i < decLen; i++) {
                        const n = decimalNum.substr(i, 1);
                        if (n !== "0") {
                            chineseStr += cnNums[Number(n)] + cnDecUnits[i];
                        }
                    }
                }
                if (chineseStr === "") {
                    chineseStr += cnNums[0] + cnIntLast + cnInteger;
                } else if (decimalNum === "") {
                    chineseStr += cnInteger;
                }
                return chineseStr;
            }
        },
        data(){
            return{
                form:{},
                construction:{},
                dialogVisible:false,
                tableData:[{
                    propertyCode:'',
                    projectName:'',
                    num:1,
                    constructionCompanyName:'',
                    collectionAmount:''
                }]
            }
        },
        methods:{
            show(item){
                if(item){
                    console.log(item)
                    getRentContractId(item.rentContractId).then(res=>{
                        this.construction=res.data.data
                        console.log(this.construction)
                        this.form=item
                        this.tableData[0].propertyCode=item.propertyCode
                        this.tableData[0].projectName=item.projectName
                        this.tableData[0].collectionAmount=item.collectionAmount
                        this.tableData[0].customerName=this.construction.customerName
                        // this.tableData[0].constructionCompanyName='深圳中科保泰科技有限公司'
                        this.dialogVisible=true
                    })

                }
            },
            close(){
                this.dialogVisible=false

            },
            print(){
                printJS({
                    printable: 'printBillTemplate',
                    type: 'html',
                    //properties: [
                    //    { field: 'name', displayName: '姓名', columnSize:`50%`},
                    //    { field: 'sex', displayName: '性别',columnSize:`50%`},
                    //],
                    // header: `<p class="custom-p"> 名单 </p>`,
                    maxWidth:1200,
                    style: '.no-print{width: 0px} @page{size: auto A2 portrait;margin: 3mm;} @media print {' +
                        '.card-box {margin-left: -80px;width: 100%;margin-bottom: 14mm;border-bottom: 0;}' +
                        '.data-info{} ' +
                        '} ',
                    gridHeaderStyle:'font-size:12px; padding:3px; border:1px solid; font-weight: 100; text-align:left;',
                    gridStyle:'font-size:12px; padding:3px; border:1px solid; text-align:left;',
                    repeatTableHeader: true,
                    scanStyles:true,
                    targetStyles: ['*'],
                    ignoreElements:['no-print']
                })

            },
    },

    }
</script>


